<template>
  <view class="comm-page">
    <view class="input-area">
      <text>输入值：</text>
      <input v-model="inputValue" class="input" />
    </view>
    <view class="input-area">
      <text>回传值：</text>
      <input v-model="returnValue" class="input" disabled />
    </view>

    <CompA :parentValue="inputValue" @send-to-compB="handleCompASend" />
    <CompB :compAValue="compBValue" @return-to-parent="handleCompBReturn" />
  </view>
</template>

<script setup>
import CompA from '@/components/CompA.vue';
import CompB from '@/components/CompB.vue';
import { ref } from 'vue';

const inputValue = ref('');
const returnValue = ref('');
const compBValue = ref('');

const handleCompASend = (data) => {
  compBValue.value = data;
};

const handleCompBReturn = (data) => {
  returnValue.value = data;
};
</script>

<style scoped>
.comm-page {
  padding: 20rpx;
}
.input-area {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.input {
  flex: 1;
  height: 60rpx;
  border: 1rpx solid #ccc;
  padding: 0 10rpx;
  background-color: #eee;
}
</style>